<template>
    <view @tap="onClick" class="setting-item flex flex-x-b flex-y-center">
        <view class="fs-30 color-333333 flex flex-y-c">
            <slot name="left"></slot>
            <image v-if="imgUrl" :src="imgUrl" style="width:40rpx;height:40rpx;display:block;margin-right:20rpx;margin-top:2px;"></image>
            <text v-if="text">{{ text }}</text>
        </view>
        <view class="flex flex-y-c" style="color:#B2B4B7;">
            <slot name="right"></slot>
            <view v-if="!hiddenIcon" class="iconfont icon-jinru blod fs-40 ml-10"></view>
        </view>
        
    </view>
</template>

<script>
export default {
    name:'setting-item',
    props: {
        jumpUrl: {
            type:String,
            default:''
        }, //跳转的页面的地址
        imgUrl: {
            type:String,
            default:''
        }, //左侧图片图标的地址
        text: {
            type:String,
            default:''
        }, //左侧文字
        hiddenIcon: {
            type:Boolean,
            default: false
        } // 隐藏进入图标
    },
    methods: {
        onClick() {
            if(this.jumpUrl.length > 0) {
                this.toPage(this.jumpUrl,'',true)
            }else {
                this.$emit('onClick')
            }    
        }
    }
}
</script>

<style lang="scss" scoped>
.setting-item {
    height: 100rpx;
    background-color: #FFFFFF;
    padding-right: 10rpx;
    padding-left: 30rpx;
    color: #333 !important;
    
}

.setting-item>view {
    /* color: rgba(255, 255, 255, 1); */
}

.setting-item+.setting-item {
    /* border-top: 0.5px solid #D8D8D8; */
    border-top: 0.5px solid #EEEEEE;
}
</style>